<template>
  <view v-if="userInfo">
    <view class="avatar-wrapper">
      <image class="bg" src="/static/icon/mine-bg.png"></image>
      <!-- {{JSON.stringify(userInfo)}} -->
      <view class="avatar-infos fr-c">
        <view class="avatar">
          <image v-if="userInfo.avatar" class="icon" :src="userInfo.avatar" mode="aspectFill"></image>
          <image v-else class="icon" src="/static/icon/avatar.png" mode="aspectFill"></image>
        </view>
        <view class="info-box">
          <view class="bt u-m-b-20">{{userInfo.username}}</view>
          <view>积分：{{userInfo.score}}</view>
          <!-- <view class="tag" :class="{ 'no-tag': !userInfo.is_install_signin }">{{!userInfo.is_install_signin ? '未认证' : '已认证'}}</view> -->
        </view>
      </view>
    </view>
    
    <view class="password">
      <view class="u-flex u-col-center">
        <image class="icon" src="/static/icon/pass-1.png"></image>
        <view class="name">西塘酒店 801</view>
      </view>
      <view class="u-flex u-col-center u-row-center u-m-t-10">
        <image class="icon1" src="/static/icon/pass-2.png"></image>
        <view class="con u-flex u-col-center u-row-center">678532</view>
        <image class="icon1" src="/static/icon/pass-3.png"></image>
      </view>
    </view>
    
    
    <view class="box">
      <view class="title" style="width: 100%;">西塘酒店 801</view>
      <view class="item">
        <image class="icon" src="/static/icon/mine-icon-1.png"></image>
        <view>
          <view class="name">水费</view>
          <view class="price">123元</view>
        </view>
      </view>
      <view class="item">
        <image class="icon" src="/static/icon/mine-icon-1.png"></image>
        <view>
          <view class="name">燃气费</view>
          <view class="price">123元</view>
        </view>
      </view>
      <view class="item">
        <image class="icon" src="/static/icon/mine-icon-2.png"></image>
        <view>
          <view class="name">电费</view>
          <view class="price">123元</view>
        </view>
      </view>
    </view>
    
    <view class="jiaofei">
      
      <view class="item">
        <view>
          <view class="title u-flex-1">西塘酒店 801</view>
          
          <view class="u-flex">
            <view class="lab1 "><text class="t">水费：</text>123元</view>
            <view class="lab1 "><text class="t">燃气费：</text>123元</view>
            <view class="lab1 "><text class="t">电费：</text>123元</view>
          </view>
          
        </view>
        <view>
          <view>
            <view class="btn btn1">更新</view>
            <view class="btn btn2">缴费</view>
          </view>
        </view>
      </view>
      
      <view class="item">
        
        
        <view>
          <view class="lab u-flex">
            <view class="t">水<text>费</text>：</view>
            <text>123元</text>
          </view>
          <view class="lab u-flex">
            <view class="t">燃<text>气</text>费：</view>
            <text>123元</text>
          </view>
          <view class="lab u-flex">
            <view class="t">电<text>费：</text></view>
            <text>123元</text>
          </view>
        </view>
        
        <view>
          <view class="btn btn1">更新</view>
          <view class="btn btn2">缴费</view>
        </view>
      </view>
      
      <view class="item">
        <view class="u-flex u-row-between u-col-center w100 u-m-b-20">
          <view class="title u-flex-1">西塘酒店 801</view>
          
        </view>
        
        <view>
          <view class="lab u-flex">
            <view class="t">水<text>费</text>：</view>
            <text>123元</text>
          </view>
          <view class="lab u-flex">
            <view class="t">燃<text>气</text>费：</view>
            <text>123元</text>
          </view>
          <view class="lab u-flex">
            <view class="t">电<text>费：</text></view>
            <text>123元</text>
          </view>
        </view>
        
        <view>
          <view class="btn btn1">更新</view>
          <view class="btn btn2">缴费</view>
        </view>
      </view>
    </view>
    
    <view class="order-menu u-flex-wrap">
      <navigator class="item" url="/hotel/order/order">
        <image class="icon" src="/static/icon/order-icon.png"></image>
        <view class="name">全部订单</view>
      </navigator>
      <navigator class="item" url="/hotel/order/order?status=2">
        <image class="icon" src="/static/icon/package-icon.png"></image>
        <view class="name">待付款</view>
      </navigator>
      <navigator class="item" url="/pages/coupon/user">
        <image class="icon" src="/static/icon/coupon-icon.png"></image>
        <view class="name">优惠券</view>
      </navigator>
      <navigator url="/rentHouse/submitwx" class="item">
        <image class="icon" src="/static/icon/fix-icon.png"></image>
        <view class="name">报修</view>
      </navigator>
      <navigator url="/rentHouse/wxrecord" class="item">
        <image class="icon" src="/static/icon/fix-icon.png"></image>
        <view class="name">报修记录</view>
      </navigator>
      <navigator class="item" url="/pages/order/list">
        <image class="icon" src="/static/icon/order-icon.png"></image>
        <view class="name">商城订单</view>
      </navigator>
    </view>
    
    <view class="tool-box">
      <view class="bt">我的工具</view>
      <view class="list">
        <navigator url="/pages/my/integral" class="item">
          <image class="icon" src="/static/icon/score-icon.png"></image>
          <view class="name">积分</view>
        </navigator
        >
        <!-- <view class="item">
          <image class="icon" src="/static/icon/protol-icon.png"></image>
          <view class="name">合同</view>
        </view> -->
        <navigator url="/pages/my/collect" class="item" hover-class="none">
          <image class="icon" src="/static/icon/collect-icon.png"></image>
          <view class="name">收藏</view>
        </navigator>
        <navigator url="/pages/my/privacy" class="item">
          <image class="icon" src="/static/icon/safe-icon.png"></image>
          <view class="name">隐私协议</view>
        </navigator>
        <!-- <navigator url="/rentHouse/myHouse" class="item">
          <image class="icon" src="/static/icon/score-icon.png"></image>
          <view class="name">我的报修</view>
        </navigator> -->
      </view>
    </view>
    
    <!-- `user_type`   '''3''=>''工程师''，''2''=>"保洁",''1''=>"销售", ''0''=>"普通会员"', -->
    <view v-if="userInfo.user_type == 1" class="tool-box">
      <view class="bt">业务员</view>
      <view class="list">
        <navigator url="/rentHouse/order" class="item">
          <image class="icon" src="/static/icon/score-icon.png"></image>
          <view class="name">我发布的</view>
        </navigator>
        <navigator url="/rentHouse/fabu" class="item">
          <image class="icon" src="/static/icon/protol-icon.png"></image>
          <view class="name">发布房源</view>
        </navigator>
      </view>
    </view>
    
    
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: null
      }
    },
    onLoad() {
      // #ifdef MP-WEIXIN
      uni.hideHomeButton()
      // #endif
    },
    onShow() {
      // this.userInfo = this.$store.state.vuex_user;
      // `user_type`   '''3''=>''工程师''，''2''=>"保洁",''1''=>"销售", ''0''=>"普通会员"',
      uni.showLoading()
      console.log('this.userInfo---------', this.userInfo)
      this.$api.getUserIndex({}).then(res=>{
        uni.hideLoading()
        if(!res.code) return
        this.userInfo = res.data.userInfo
      })
    }
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f6f8;
    overflow: hidden;
  }
  .password{
    height: 168rpx;margin: 30rpx auto;
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx; padding: 26rpx;
    .icon{width: 46rpx; height: 46rpx; margin-right: 10rpx;}
    .name{font-size: 30rpx; color: #282828;}
    .icon1{width: 28rpx; height: 28rpx; margin: 0 16rpx;}
    .con{
      width: 186rpx;
      height: 60rpx;
      border-radius: 32rpx; font-size: 28rpx;
      border: 1px solid rgba(151,151,151,0.43);
    }
  }
  .avatar-wrapper {
    background-color: #2D96FF;
    padding-top: 98rpx;
    position: relative;
    .bg {
      height: 162rpx;
      width: 100%;
    }
    .avatar-infos {
      box-sizing: border-box; color: #FFFFFF;
      padding: 0 36rpx;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      .avatar {
        margin-right: 20rpx;
        .icon {
          width: 136rpx;
          height: 136rpx;
          border-radius: 50%;
          display: block;
        }
      }
      .info-box {
        flex: 1;
        .bt {
          font-size: 40rpx;
          color: #FFFFFF;
          font-weight: bold;
          line-height: 56rpx;
          margin-bottom: 6rpx;
        }
        .tag {
          width: 120rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          background: #2A70F9;
          border-radius: 26rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          &.no-tag {
            background-color: #ddd;
          }
        }
      }
    }
  }
  
  .jiaofei{
    margin: 30rpx auto;
    width: 690rpx; border-radius: 16rpx; background-color: #FFFFFF;
    .item{
      padding: 20rpx 30rpx; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
      .t{width: 100rpx; display: flex; align-items: center; justify-content: space-between; color: #666;}
    }
    .w100{width: 100%;}
    .lab{padding: 0rpx 0; font-size: 28rpx;}
    .title{font-size: 32rpx;}
    .btn{border-radius: 8rpx; width: 100rpx; height: 50rpx; @include flex(row,center,center); margin-left: 10rpx;}
    .btn1{border:1px solid #ededed; background-color: rgba(45, 150, 255,0.2); margin-bottom: 10rpx;}
    .btn2{border:1px solid #2D96FF; background-color: #2D96FF; color: #fff;}
  }
  .box {
    margin: 30rpx auto;
    width: 690rpx; flex-wrap: wrap !important;
    @include flex(row,center,space-between);
    .title{font-size: 32rpx;  margin-bottom: 16rpx;}
    .item {
      width: 33%;
      height: 162rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      @include flex;
      .icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 18rpx;
        margin-left: 34rpx;
      }
      .name {
        flex: 1;
        font-size: 30rpx;
        color: #282828;
      }
    }
  }
  .order-menu {
    margin: 30rpx auto;
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    @include flex;
    overflow: hidden; flex-wrap: wrap !important; padding:20rpx 0 10rpx; justify-content: flex-start !important;
    .item {
      @include flex(column);
      height: 100%; padding: 20rpx 0 ;
      width: 25%;
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 20rpx;
      }
      .name {
        font-size: 30rpx;
        color: #282828;
        text-align: center;
      }
    }
  }

  .tool-box {
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 30rpx auto;
    .bt {
      font-size: 30rpx;
      font-weight: bold;
      color: #282828;
      line-height: 40rpx;
      padding: 30rpx 30rpx 56rpx;
      box-sizing: border-box;
    }
    .list {
      @include flex(row,flex-start,flex-start);
      flex-wrap: wrap;
      height: auto !important;
      .item {
        width: 25%; margin-bottom: 26rpx;
        @include flex(column);
        .icon {
          width: 52rpx;
          height: 52rpx;
          margin-bottom: 10rpx;
        }
        .name {
          font-size: 30rpx;
          line-height: 40rpx;
          text-align: center;
        }
      }
    }
  }
  
</style>